import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import { Table, Spin, Form, Row, Col, Input, Button, Icon, DatePicker, Select } from 'antd'
import echarts from 'echarts'
import Ajax from 'lib/Ajax'

const FormItem = Form.Item;
const { MonthPicker } = DatePicker;
const Option = Select.Option;

var getData = function(arr, key) {
    var data = [];
    _.each(arr, (item)=>{
      data.push(item[key]);
    });
    return data;
};

class ModuleName extends Component {
	constructor(props) {
    super(props);
    this.state = {
      projectList: []
    }
  }

  componentDidMount(){
    this.chart = echarts.init(document.getElementById('tree'));
    this.loadTreeData();
    // this.loadProject();
  }

  loadTreeData = ()=>{ 
    var self = this;
    Ajax({
      url: '/reportCenter/projectMoneyStat',
      data: {
        "beginDate": "2016-09-01",
        "endDate": "2016-12-01",
        "projectIds": [10001,10002],
        "areaId": 100001,
        "orgId": 100001,
      },
      success: function(data){
        self.updataTree(data[0]);
      },
      error: function(error){
        message.error(error);
      }
    });
  }

  loadProject = ()=>{
    var self = this;
    Ajax({
      url: '/project/list',
      data: {
        perPage: 10000,   //每页数量
      },
      success: function(data){
        self.setState({
          projectList: data.list
        });
      },
      error: function(error){
        message.error(error);
      }
    });
  }

  updataTree = (data)=>{
    this.chart.setOption({
          "calculable": true,
          "tooltip": {
          "trigger": "axis",
          "axisPointer": {
              "type": "shadow",
              textStyle: {
                  color: "#fff"
              }

          },
        },
        "xAxis": [{
          "type": "category",
          "axisLine": {
              lineStyle: {
                  color: '#90979c'
              }
          },
          "splitLine": {
              "show": false
          },
          "axisTick": {
              "show": false
          },
          "splitArea": {
              "show": false
          },
          "axisLabel": {
              "interval": 0,

          },
          "data": getData(data.pointList, 'x'),
        }],
        "yAxis": [{
            "type": "value",
            "splitLine": {
                "show": false
            },
            "axisLine": {
                lineStyle: {
                    color: '#90979c'
                }
            },
            "axisTick": {
                "show": false
            },
            "axisLabel": {
                "interval": 0,

            },
            "splitArea": {
                "show": false
            }
        }],
        "series": [{
          "name": data.name,
          "type": "bar",
          "barMaxWidth": 35,
          "barGap": "10%",
          "itemStyle": {
              "normal": {
                  "color": "rgba(255,144,128,1)",
                  "label": {
                      "show": true,
                      "textStyle": {
                          "color": "#fff"
                      },
                      "position": "insideTop",
                      formatter: function(p) {
                          return p.value > 0 ? (p.value) : '';
                      }
                  }
              }
          },
          "data": getData(data.pointList, 'y'),
        }, {
            "name": "总数",
            "type": "line",
            "stack": "总量",
            symbolSize:10,
            symbol:'circle',
            "itemStyle": {
                "normal": {
                    "color": "rgba(252,230,48,1)",
                    "barBorderRadius": 0,
                    "label": {
                        "show": true,
                        "position": "top",
                        formatter: function(p) {
                            return p.value > 0 ? (p.value) : '';
                        }
                    }
                }
            },
            "data": getData(data.pointList, 'y')
        }]
    });
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  }
  
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
    	<div className="projectMap">
        <Form inline onSubmit={this.handleSubmit} style={{display: 'none'}}>
          <FormItem>
            {getFieldDecorator('projectId', {
              rules: [{ required: true, message: '请选择项目' }],
            })(
              <Select placeholder="请选择项目" style={{ width: 151 }}>
                {
                  this.state.projectList.map((obj)=>{
                    return (<Option key={obj.projectId}>{ obj.projectName }</Option>)
                  })
                }
              </Select>
            )}
          </FormItem>
          <FormItem>
            {getFieldDecorator('beginDate', {
              // rules: [{ required: true, message: '请选择开始时间' }],
            })(
              <MonthPicker placeholder="开始时间"/>
            )}
          </FormItem>
          <FormItem>
            {getFieldDecorator('endDate', {
              // rules: [{ required: true, message: '请选择结束时间' }],
            })(
              <MonthPicker placeholder="结束时间"/>
            )}
          </FormItem>
          <Button type="primary" htmlType="submit">搜索</Button>
        </Form>
        <div id="tree" style={{height:400}}></div>
    	</div>
    )
  }
}

function mapStateToProps(state) {
  return {
    
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({  }, dispatch)
}

module.exports = connect(mapStateToProps,mapDispatchToProps)(Form.create()(ModuleName))
